<template>
  <div id="boxBind">
    <!-- the Nvar -->
    <van-sticky>
      <van-nav-bar title="医废处理" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="boxbind-content">
      <!-- scan med waste box -->
      <div class="store-info">
        <div>
          <span>暂存地名称</span>
          <span>医院北楼暂存地</span>
        </div>
        <div>
          <span>暂存地管理员姓名</span>
          <span>XXX</span>
        </div>
        <div>
          <span>交接人姓名</span>
          <span>XXX</span>
        </div>
      </div>

      <div class="his-bind">
        <div class="his-bind-title">
          <span>医废处理方式</span>
        </div>

        <div class="scan-box" @click="toMedBoxRouter">
          <div>
            <span>选择处理方式</span>
          </div>
          <div>
            请选择
            <i class="iconfont icon-icon-test"></i>
          </div>
        </div>
      </div>

      <!--the history bind -->
      <div class="his-bind">
        <div class="his-bind-title">
          <span>暂存废物信息</span>
        </div>

        <div class="scan-box" @click="toMedBoxRouter">
          <div>
            <span>扫描医废箱/袋</span>
          </div>
          <van-image width="45px" height="45px" :src="require('@/assets/imgs/medDeal/1024.png')" />
        </div>
      </div>
    </div>
    <van-button type="primary" block @click="commitStore">完成</van-button>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  name: "BoxBind",
  data() {
    return {
      infoList: [
        {
          kinds: "感染性废物",
          num: "3个",
          Weight: "2个",
          boxWeight: "54kg",
          reWeight: "54kg",
        },
        {
          kinds: "感染性废物",
          num: "3个",
          Weight: "2个",
          boxWeight: "54kg",
          reWeight: "54kg",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toMedBoxRouter() {
      this.$router.push({
        path: "/medScanWaste",
      });
    },
    // 提交暂存
    commitStore() {
      Dialog.confirm({
        message: "暂存完成!",
        cancelButtonText: "确认",
        confirmButtonText: "返回首页",
      })
        .then(() => {
          // on confirm
          this.$router.push({
            path: "/ScanColl",
          });
        })
        .catch(() => {
          // on cancel
          this.$router.push({
            path: "",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.boxbind-content {
  padding: 10px;
  color: #666;
  font-size: 15px;
  height: 80vh;
  background-color: #f2f2f2;
  .store-info {
    width: 100%;
    height: 130px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & div {
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      align-items: center;
      & span {
        margin: 5px;
      }
      & span:nth-child(2) {
        color: #333333;
      }
    }
  }
  .his-bind {
    margin-top: 10px;
    font-size: 15px;
    .his-bind-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 0 10px;
      font-weight: 650;
    }
    .scan-box {
      height: 70px;
      background-color: #ffffff;
      margin-top: 10px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      align-items: center;
      & div:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #333333;
        & span:nth-child(1) {
          font-size: 17px;
          display: block;
          margin-bottom: 5px;
        }
      }
      & div:nth-child(2) {
        border-radius: 50%;
        text-align: center;
        .the-icon {
          font-size: 25px;
        }
      }
    }
  }
}
#boxBind .el-divider--horizontal {
  margin: 20px 0 10px 0;
}
</style>
